<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能添加</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>

        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/mainui.html">管理页面</a></span>
                </transition>
            </div>
            <el-menu :default-openeds   ="['1']" style="border: none;" background-color="black" text-color="#fff"
                     active-text-color="#ffd04b"
                     default-active="function"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <a href="/page/end/mainui.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href="item.path" v-for="item in user.permission" :key="item.id">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name,item.flag}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.jobnum}}</span>
                        <el-dropdown>
                            <img src="/files/avatar"
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/static/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>
                <div style="color: black; font-size: 20px; margin: 10px 0">功能添加</div>
                <div style=" height: 1px; background-color: white"></div>


                <div style="width: 500px; margin: 20px; border-radius: 10px;float: left">
<!--                    <button @click="con">button</button>-->
                    <div style="margin-top: 25px;  width: 100%; border-radius: 20px;background-color: #99abb4;height: 320px;">
                        <div style=" margin-left:20px;height: 1px; background-color: white"></div>
                        <div style="margin-left: 25px">
                            <div style="margin-top: 25px">
                                <el-upload
                                        class="upload-demo"
                                        ref="upload"
                                        action="/funcadd"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                        :file-list="fileList"
                                        :auto-upload="true">
                                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传zip压缩文件</div>
                                </el-upload>

                            </div>




                        </div>



                    </div>


                </div>
                <div style="width: 700px;background-color: #99abb4;margin-top:45px;height: 325px;float: left;border-radius: 20px">
                    <div style="margin-top: 10px;margin-left: 10px">
                        <span>预留区域一</span>
                    </div>


                </div>
<!--                <div style="width: 700px;background-color: #99abb4;margin-top:45px;height: 325px;float: bottom;border-radius: 20px">-->
<!--                    <span>预留区域二</span>-->


<!--                </div>-->

            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<!--<script src="../../js/tinymce/tinymce.min.js"></script>-->
<script src="../../js/base.js"></script>

<script>

    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            isCollapse: false,
            fileList: [],


        },
        mounted() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
        },
        methods: {
            con(){
              console.log(this.user.username);
            },
            handleCollapse() {

                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/user/logout");
                sessionStorage.removeItem("user");
                location.href = "../../index.html";
            },
            submitUpload() {
                this.$refs.upload.submit();
                this.fileList = [];


            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }



        }
    })
</script>
</body>
</html>
